<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>keep-alive</title>
</head>
<body>
<div id="app">
  keep-alive 一般用在缓存 ，为后面的路由做准备，如果缓存了就不会再周created mounted钩子函数<br/>
  子组件和父组件同时
  <input type="radio" v-model="radio" value="home"> home
  <input type="radio" v-model="radio" value="list"> list

  <keep-alive>
    <component :is="radio"></component>
  </keep-alive>

</div>

</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  let home = {
    template:`<div>home</div>`,
    beforeDestroy(){
      alert('销毁')
    }
  };
  let list = {
    template:`<div>list</div>`,
    beforeDestroy(){
      alert('销毁')
    }
  };

  let vm = new Vue({
    el: '#app',
    data: {
      radio :'home'
    },
    components:{
      home,list
    }
  })

</script>
</html>
